import React, { useState, useEffect, useMemo } from 'react';
import { 
  Plus, 
  Search, 
  Copy, 
  Trash2, 
  Edit2, 
  Save, 
  X, 
  Tag, 
  Terminal, 
  Cpu, 
  Check 
} from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  onAuthStateChanged, 
  signInAnonymously, 
  signInWithCustomToken 
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  updateDoc, 
  deleteDoc, 
  doc, 
  onSnapshot, 
  serverTimestamp, 
  query, 
  orderBy 
} from 'firebase/firestore';

// --- Configuración de Firebase ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// --- Componente Principal ---
export default function PromptManager() {
  const [user, setUser] = useState(null);
  const [prompts, setPrompts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentPrompt, setCurrentPrompt] = useState(null); // Para editar o crear
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedTag, setSelectedTag] = useState(null);
  const [toast, setToast] = useState(null);

  // 1. Autenticación
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Error en autenticación:", error);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, []);

  // 2. Carga de Datos (Firestore)
  useEffect(() => {
    if (!user) return;

    // Ruta segura: artifacts/{appId}/users/{userId}/prompts
    const promptsCollection = collection(db, 'artifacts', appId, 'users', user.uid, 'prompts');
    
    // NOTA: Firestore requiere índices para orderBy compuesto, así que traemos todo y ordenamos en memoria
    // o usamos una query simple. Aquí usamos snapshot simple.
    const unsubscribe = onSnapshot(promptsCollection, 
      (snapshot) => {
        const loadedPrompts = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        
        // Ordenar en cliente por fecha (más reciente primero)
        loadedPrompts.sort((a, b) => {
          const dateA = a.createdAt?.toDate ? a.createdAt.toDate() : new Date(0);
          const dateB = b.createdAt?.toDate ? b.createdAt.toDate() : new Date(0);
          return dateB - dateA;
        });

        setPrompts(loadedPrompts);
        setLoading(false);
      },
      (error) => {
        console.error("Error al cargar prompts:", error);
        setLoading(false);
      }
    );

    return () => unsubscribe();
  }, [user]);

  // --- Lógica de Negocio ---

  const handleSave = async (e) => {
    e.preventDefault();
    if (!user) return;

    const title = e.target.title.value;
    const content = e.target.content.value;
    const tagsInput = e.target.tags.value;
    
    // Convertir tags string a array y limpiar espacios
    const tags = tagsInput.split(',').map(t => t.trim()).filter(t => t.length > 0);

    const promptData = {
      title,
      content,
      tags,
      updatedAt: serverTimestamp()
    };

    try {
      if (currentPrompt?.id) {
        // Editar existente
        const promptRef = doc(db, 'artifacts', appId, 'users', user.uid, 'prompts', currentPrompt.id);
        await updateDoc(promptRef, promptData);
        showToast("Prompt actualizado correctamente");
      } else {
        // Crear nuevo
        const promptsCollection = collection(db, 'artifacts', appId, 'users', user.uid, 'prompts');
        await addDoc(promptsCollection, {
          ...promptData,
          createdAt: serverTimestamp()
        });
        showToast("Prompt guardado correctamente");
      }
      closeModal();
    } catch (error) {
      console.error("Error al guardar:", error);
      showToast("Error al guardar", "error");
    }
  };

  const handleDelete = async (id) => {
    if (!user || !window.confirm("¿Estás seguro de que quieres eliminar este prompt?")) return;
    try {
      const promptRef = doc(db, 'artifacts', appId, 'users', user.uid, 'prompts', id);
      await deleteDoc(promptRef);
      showToast("Prompt eliminado");
    } catch (error) {
      console.error("Error al eliminar:", error);
    }
  };

  const openNewModal = () => {
    setCurrentPrompt(null);
    setIsModalOpen(true);
  };

  const openEditModal = (prompt) => {
    setCurrentPrompt(prompt);
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
    setCurrentPrompt(null);
  };

  // Función de copiado robusta para iframes
  const copyToClipboard = (text) => {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    textArea.style.left = "-9999px";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
      document.execCommand('copy');
      showToast("Copiado al portapapeles");
    } catch (err) {
      console.error('Error al copiar', err);
      showToast("Error al copiar", "error");
    }
    
    document.body.removeChild(textArea);
  };

  const showToast = (message, type = 'success') => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 3000);
  };

  // --- Filtrado ---
  const filteredPrompts = useMemo(() => {
    return prompts.filter(p => {
      const matchesSearch = (p.title?.toLowerCase() || '').includes(searchTerm.toLowerCase()) || 
                            (p.content?.toLowerCase() || '').includes(searchTerm.toLowerCase());
      const matchesTag = selectedTag ? p.tags?.includes(selectedTag) : true;
      return matchesSearch && matchesTag;
    });
  }, [prompts, searchTerm, selectedTag]);

  // Obtener todos los tags únicos
  const allTags = useMemo(() => {
    const tags = new Set();
    prompts.forEach(p => p.tags?.forEach(t => tags.add(t)));
    return Array.from(tags).sort();
  }, [prompts]);

  // --- Renderizado ---

  if (loading) {
    return (
      <div className="min-h-screen bg-slate-900 text-slate-200 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-900 text-slate-100 font-sans selection:bg-indigo-500 selection:text-white">
      {/* Toast Notification */}
      {toast && (
        <div className={`fixed top-4 right-4 z-50 px-4 py-2 rounded shadow-lg transition-all transform translate-y-0 ${toast.type === 'error' ? 'bg-red-500' : 'bg-emerald-600'} text-white flex items-center gap-2`}>
          {toast.type === 'success' && <Check size={16} />}
          {toast.message}
        </div>
      )}

      {/* Header */}
      <header className="bg-slate-800 border-b border-slate-700 sticky top-0 z-30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-3">
              <div className="bg-indigo-600 p-2 rounded-lg">
                <Cpu size={24} className="text-white" />
              </div>
              <h1 className="text-xl font-bold tracking-tight text-white">PromptBase</h1>
            </div>

            <div className="flex flex-1 w-full md:w-auto max-w-xl gap-2">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" size={18} />
                <input
                  type="text"
                  placeholder="Buscar prompts..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full bg-slate-900 border border-slate-700 text-slate-200 pl-10 pr-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent placeholder-slate-500"
                />
              </div>
              <button 
                onClick={openNewModal}
                className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors font-medium whitespace-nowrap shadow-lg shadow-indigo-900/20"
              >
                <Plus size={18} />
                <span className="hidden sm:inline">Nuevo Prompt</span>
                <span className="sm:hidden">Nuevo</span>
              </button>
            </div>
          </div>

          {/* Tag Cloud */}
          {allTags.length > 0 && (
            <div className="mt-4 flex flex-wrap gap-2 items-center">
              <span className="text-xs text-slate-500 uppercase font-bold tracking-wider mr-2">Filtros:</span>
              <button
                onClick={() => setSelectedTag(null)}
                className={`px-3 py-1 rounded-full text-xs font-medium transition-colors ${
                  selectedTag === null 
                    ? 'bg-slate-200 text-slate-900' 
                    : 'bg-slate-800 border border-slate-700 text-slate-400 hover:bg-slate-700'
                }`}
              >
                Todos
              </button>
              {allTags.map(tag => (
                <button
                  key={tag}
                  onClick={() => setSelectedTag(tag === selectedTag ? null : tag)}
                  className={`px-3 py-1 rounded-full text-xs font-medium transition-colors ${
                    selectedTag === tag 
                      ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/50' 
                      : 'bg-slate-800 border border-slate-700 text-slate-400 hover:bg-slate-700'
                  }`}
                >
                  #{tag}
                </button>
              ))}
            </div>
          )}
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {filteredPrompts.length === 0 ? (
          <div className="text-center py-20 bg-slate-800/50 rounded-2xl border border-slate-700/50 border-dashed">
            <Terminal size={48} className="mx-auto text-slate-600 mb-4" />
            <h3 className="text-lg font-medium text-slate-300">No hay prompts todavía</h3>
            <p className="text-slate-500 mt-2 max-w-sm mx-auto">
              {searchTerm || selectedTag 
                ? "No se encontraron resultados para tu búsqueda."
                : "Comienza creando tu primera colección de prompts para IA."}
            </p>
            {!searchTerm && !selectedTag && (
              <button 
                onClick={openNewModal}
                className="mt-6 text-indigo-400 hover:text-indigo-300 font-medium"
              >
                Crear mi primer prompt &rarr;
              </button>
            )}
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredPrompts.map((prompt) => (
              <div 
                key={prompt.id} 
                className="group bg-slate-800 border border-slate-700 rounded-xl overflow-hidden hover:border-indigo-500/50 hover:shadow-xl hover:shadow-indigo-900/10 transition-all duration-300 flex flex-col"
              >
                {/* Card Header */}
                <div className="p-4 border-b border-slate-700/50 flex justify-between items-start gap-4">
                  <h3 className="font-semibold text-lg text-slate-100 line-clamp-1" title={prompt.title}>
                    {prompt.title}
                  </h3>
                  <div className="flex items-center gap-1 opacity-100 sm:opacity-0 group-hover:opacity-100 transition-opacity">
                    <button 
                      onClick={() => openEditModal(prompt)}
                      className="p-1.5 text-slate-400 hover:text-indigo-400 hover:bg-indigo-400/10 rounded"
                      title="Editar"
                    >
                      <Edit2 size={16} />
                    </button>
                    <button 
                      onClick={() => handleDelete(prompt.id)}
                      className="p-1.5 text-slate-400 hover:text-red-400 hover:bg-red-400/10 rounded"
                      title="Eliminar"
                    >
                      <Trash2 size={16} />
                    </button>
                  </div>
                </div>

                {/* Card Body */}
                <div className="p-4 flex-1">
                  <div className="relative bg-slate-900/50 rounded-lg p-3 font-mono text-sm text-slate-300 border border-slate-700/50 group-hover:border-slate-600 transition-colors">
                    <div className="absolute top-2 right-2">
                       <button 
                        onClick={() => copyToClipboard(prompt.content)}
                        className="p-1.5 bg-slate-800 hover:bg-indigo-600 text-slate-400 hover:text-white rounded shadow-sm border border-slate-700 hover:border-indigo-500 transition-all"
                        title="Copiar prompt"
                      >
                        <Copy size={14} />
                      </button>
                    </div>
                    <p className="line-clamp-6 whitespace-pre-wrap pr-8 min-h-[5rem]">
                      {prompt.content}
                    </p>
                  </div>
                </div>

                {/* Card Footer */}
                <div className="px-4 pb-4 pt-0">
                  <div className="flex flex-wrap gap-2">
                    {prompt.tags?.map((tag, idx) => (
                      <span 
                        key={idx} 
                        className="inline-flex items-center text-[10px] px-2 py-1 rounded bg-slate-700/50 text-slate-400 border border-slate-700"
                      >
                        <Tag size={10} className="mr-1" />
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </main>

      {/* Modal Crear/Editar */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm">
          <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
            <form onSubmit={handleSave}>
              <div className="p-6 border-b border-slate-800 flex justify-between items-center bg-slate-800/50">
                <h2 className="text-xl font-bold text-white">
                  {currentPrompt ? 'Editar Prompt' : 'Nuevo Prompt'}
                </h2>
                <button 
                  type="button"
                  onClick={closeModal}
                  className="text-slate-400 hover:text-white transition-colors"
                >
                  <X size={24} />
                </button>
              </div>
              
              <div className="p-6 space-y-5">
                <div>
                  <label className="block text-sm font-medium text-slate-400 mb-1">Título</label>
                  <input
                    name="title"
                    defaultValue={currentPrompt?.title}
                    required
                    placeholder="Ej: Generador de emails de venta..."
                    className="w-full bg-slate-950 border border-slate-700 rounded-lg px-4 py-2.5 text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all placeholder-slate-600"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-400 mb-1">Prompt</label>
                  <textarea
                    name="content"
                    defaultValue={currentPrompt?.content}
                    required
                    rows={8}
                    placeholder="Escribe tu prompt aquí..."
                    className="w-full bg-slate-950 border border-slate-700 rounded-lg px-4 py-3 text-white font-mono text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all placeholder-slate-600 resize-none"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-400 mb-1">
                    Etiquetas <span className="text-slate-600 text-xs font-normal">(separadas por comas)</span>
                  </label>
                  <div className="relative">
                    <Tag className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-500" size={16} />
                    <input
                      name="tags"
                      defaultValue={currentPrompt?.tags?.join(', ')}
                      placeholder="marketing, código, ideas..."
                      className="w-full bg-slate-950 border border-slate-700 rounded-lg pl-10 pr-4 py-2.5 text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all placeholder-slate-600"
                    />
                  </div>
                </div>
              </div>

              <div className="p-6 border-t border-slate-800 bg-slate-800/30 flex justify-end gap-3">
                <button
                  type="button"
                  onClick={closeModal}
                  className="px-5 py-2.5 rounded-lg text-slate-300 hover:text-white hover:bg-slate-800 transition-colors font-medium"
                >
                  Cancelar
                </button>
                <button
                  type="submit"
                  className="px-5 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white shadow-lg shadow-indigo-900/30 flex items-center gap-2 font-medium transition-all"
                >
                  <Save size={18} />
                  Guardar
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}